/*
  学习目标：JSX插值表达式 - 对象和数组
  表达式: 
    变量
    简单类型: string number boolean null undefined 
    引用类型: ✅object  ✅array function
    其它: 三元/ 逻辑且 / JSX

*/
import React from 'react';
import ReactDOM from 'react-dom';

const person = {
  name: 'zs',
  age: 18,
  type: 'zs',
  children: {
    name: 'xzs',
  },
};

// 💥 数组内的每项元素, 会当做dom节点, 直接渲染出来
const list = ['橘子', '香蕉', '苹果'];
const list2 = [<i>橘子1</i>, <i>橘子2</i>, <i>橘子3</i>];

const ulNode2 = (
  <div>
    {/* 💥 对象不能直接放在插值表达式中 */}
    <h2>{person.name}</h2>

    <h3>{list}</h3>
    <h3>橘子香蕉苹果</h3>
    <div>{list2}</div>
  </div>
);

ReactDOM.render(ulNode2, document.getElementById('root'));
